<template>
  <div class="startWriting">
    <div class="writingContainer">
      <jFrom @submitform="toSubmit">
        <jFormItem :rules="titleRules" :lable="'文章标题'" v-model="article.title" placeholder="请输入标题"></jFormItem>
        <jFormItem :rules="contentRules" :lable="'文章详情'" v-model="article.content" :tag="'textarea'" placeholder="请输入你想说的话..."></jFormItem>
        <template #Footer>
          <button class="defaultBtn primary mybtn">立即登录</button>
        </template>
      </jFrom>
      <!-- <textarea name="" id="" cols="30" rows="10"></textarea> -->
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent,reactive} from 'vue'
import jFrom from '../components/form/Jfrom.vue'
import jFormItem,{RulesProp} from '../components/form/JFormItem.vue'
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
import {GolbalDataProps} from '../store/index'

interface ArticleType{
  id:number;
  title:string;
  content:string;
  date:string;
  columnid:number;
}

export default defineComponent({
  name:'startWriting',
  components:{
    jFrom,
    jFormItem
  },
  setup(){
    const router = useRouter()
    const store = useStore<GolbalDataProps>()
    const titleRules:RulesProp = [
      {type:'require',message:'标题不能为空'},
      {type:'userlimit',message:'标题为6-12个字符之间'}
    ]
    const contentRules:RulesProp = [
      {type:'require',message:'内容不能为空'},
    ]
    const article = reactive<ArticleType>({
      id:1,
      title:'',
      content:'',
      date:'',
      columnid:2
    })
    console.log('data',article)
    const toSubmit = (res:boolean)=>{
      if(res){
        article.date = new Date().toLocaleString()
        console.log('添加的数据',article)
        store.commit('addPosts',article)
        console.log('添加后的数据',store.state.posts)
        router.push('/')
        // console.log(article)
      }
    }
    
    return {
      titleRules,
      contentRules,
      article,
      toSubmit // 定义的方法一定要返回才可以使用
    }
  }
})
</script>

<style lang="less" scoped>
.writingContainer{
  width: 60%;
  height: 200px;
  // background-color: skyblue;
  margin: 0 auto;
}
</style>